<script type="text/javascript" src="static/js/jquery.js"></script>
<script type="text/javascript" src="static/js/jquery.form.js"></script>
<script type="text/javascript" src="static/js/helpsNew.js"></script>
<link rel="stylesheet" href="static/css/checkbox.css">
<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
    table.gridtable {
        font-family: verdana, arial, sans-serif;
        font-size: 10px;
        color: #333333;
        border-width: 1px;
        border-color: #666666;
        border-collapse: collapse;
    }

    table.gridtable th {
        border-width: 1px;
        padding: 10px;
        border-style: solid;
        border-color: #666666;
        background-color: #dedede;
    }

    table.gridtable td {
        border-width: 1px;
        padding: 10px;
        border-style: solid;
        border-color: #666666;
        background-color: #ffffff;
    }

    .loading {
        display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 1002;
    }

    .class_div {
        display: inline
    }
</style>


<script type="text/javascript">
    //变量初始化，存储需要请求的数据
    imgJson = {
        "imgString": "",
        "num": 0,
        "url": "",
        "result": "",
        "timeTake": 0.0,
        "textAngle": false,
        "textLine": false,
        'ocrFlag': false
    };

    imgBoxes = [];
    imgRate = 1;
</script>


<div style="">
    <div>

        <span class="margin-r" style="font-size:100%">文字方向检测</span>
        <label class="el-switch el-switch-sm">
            <input type="checkbox" name="switch" id="textAngle">
            <span class="el-switch-style"></span>
        </label>

        <span class="margin-r" style="font-size:110%">单行文字识别</span>
        <label class="el-switch el-switch-sm">
            <input type="checkbox" name="switch" id="textLine">
            <span class="el-switch-style"></span>
        </label>
    </div>
    <br>
    <div>
        {% for index,bill in enumerate(post['billList'])%}
        <div style="font-size:10px" class="class_div" onclick="getBill('{{bill}}',this,{{index}})">
            <span class="margin-r" style="font-size:110%">{{bill}}</span>
            <label class="el-switch el-switch-sm">
                <input type="checkbox" name="switch" id="billModel_{{index}}">
                <span class="el-switch-style"></span>
            </label>
        </div>
        {% end %}
    </div>
    <br>
    <div class="image-input-container" style="position: absolute; left: 50%; top: 20%; ">
        <input type="file" id='imageButton' accept="image/png, image/bmp, image/jpg, image/jpeg"
               class="image-local-input" onchange="FunimgPreview('imageButton','Preview','myCanvas')">
    </div>

</div>


<img class="canvas-container">
<img id='Preview' width="800" height="600" src=""
     style="position: absolute; left: 35%; top: 55%; transform: translate(-50%, -50%) scale(0.5);z-index:2;"></img>
<canvas id="myCanvas" width="800" height="600"
        style="position: absolute; left: 35%; top: 55%; transform: translate(-50%, -50%) scale(0.5);z-index:3;"></canvas>
</img>


<img id='loadingGif' width="128" height="128" src="static/img/loading.gif"
     style="position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%) scale(0.5);z-index:3;display:none"></img>


<!#############################识别结果######################################################### ---->
<div style="position: absolute; left: 68%; top: 12%;">
    <div class="json">
        <div class="json-request-title" id="billmodelname"></div>
        <div style="height:500px;width:300px; overflow:scroll;">
            <div id="billNameList"></div>
            <div id="mytable"></div>
        </div>
    </div>
</div>
<!##############################识别结果######################################################### ---->


<script type="text/javascript">
    //点击文件,自动提交文件，进行识别
    jQuery('#imageButton').on('change', function () {
    });

    function getBill(value, that, index) {
        //勾选需要识别的类型
        var divStyle = document.getElementsByClassName("class_div");
        for (var i = 0; i < divStyle.length; i++) {
            if (index == i) {
                document.getElementById("billModel_" + i).checked = true;
            }
            else {
                document.getElementById("billModel_" + i).checked = false;
            }
        }

        imgJson.billModel = value;
    }

    setInterval(cycle, 700); //动画显示box

</script> 

